<template>
  <div class="login">
    <div class="login-nav">
      <van-nav-bar
        left-arrow
        :border="false"
        @click-left="$router.back()"
      />
    </div>
    <div class="login-title">
      <h2 @click="fn">硅谷外卖</h2>
    </div>
    <div class="login-tab">
      <van-tabs v-model:active="active" color="#02a774" title-active-color="#02a774">
        <van-tab title="短信登录">
          <login-tab
            :isShowPassword="false"
            :isShowTips="true"
            :isShowSendCode="true"
            :index="active.value"
          />
        </van-tab>
        <van-tab title="密码登录">
          <login-tab
          :isShowPassword="true"
          :isShowRandomCode="true"
          phdContent="手机/邮箱/用户名"
          :index="active"
          />
        </van-tab>
      </van-tabs>
    </div>
    <div class="login-">
      <van-divider
        :style="{ color: '#999', borderColor: 'transparent', padding: '0 16px' }"
      >
        关于我们
      </van-divider>
    </div>
  </div>
</template>

<script setup>
import loginTab from './components/login-tab.vue'
import { ref } from 'vue'
const active = ref(0)

</script>
<script>
export default {
  name: 'LoginPage'
}
</script>
<style lang="less" scoped>
.login {
  background: white;
}
.login-title {
  font-size: 40px;
  font-weight: bold;
  color: #02a774;
  text-align: center
}
.login-tab {
  :deep(.van-tabs__wrap) {
    padding: 0 5em;
  }
}
.login-nav {
  :deep(.van-icon) {
    color: #999;
  }
}
</style>
